/*
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2022-01-17 06:41:43
 * @LastEditors: GGB
 * @LastEditTime: 2022-01-30 08:08:30
 */
import './FileSearch.scss';
import { Button, Input } from 'antd'
import React, {
    useState, useEffect,
    // useRef
} from 'react'
import PropTypes from 'prop-types';
import useKeyPress from '../hooks/useKeyPress';
import useIpcRenderer from '../hooks/useIpcRenderer';
// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
// import { faSearch} from '@fortawesome/free-solid-svg-icons'
const FileSearch = ({ title, onFileSearch }) => {
    const [inputActive, setInputActive] = useState(false)
    const [value, setValue] = useState('')
    const enterPressed = useKeyPress(13)
    const escPressed = useKeyPress(27)
    // let node= useRef(null)
    const closeSearch = () => {
        setInputActive(false)
        setValue('')
        // 清除搜索结果
        onFileSearch()
    }
    const handleSearch = () => { 
        setInputActive(true)
    }

    useEffect(() => {
        if (enterPressed && inputActive) onFileSearch(value)
        if (escPressed && inputActive) closeSearch()
    })
    useIpcRenderer({
        'search-file': handleSearch,
    })

    // useEffect(() => {
    //     const handleInputEvent = (event) => { 
    //         const { keyCode } = event
    //         if (keyCode === 13 && inputActive) {
    //             onFileSearch(value)
    //         } else if (keyCode === 27 && inputActive) { 
    //             closeSearch(event)
    //         }
    //     }
    //     document.addEventListener('keyup',handleInputEvent)
    //     return () => {
    //         document.removeEventListener('keyup',handleInputEvent)
    //     }
    // })

    // useEffect(() => {
    //     if (inputActive) { 
    //         node.current.focus()
    //     }
    // }, [inputActive])
    return (
        <div className='d-flex  alert-primary  px-2 py-1 h-4'>
            {
                !inputActive &&
                <div className='d-flex w-100 flex-row justify-content-center align-items-center'>
                    <span>{title}</span>
                    <Button className="ml-auto" onClick={handleSearch } size='small' type="primary">搜索</Button>
                </div>
            }{
                inputActive &&
                // <div className='d-flex w-100 justify-content-between align-item-center'>
                //         <input
                //             className='form-control flex-1'
                //             ref={node}
                //             value={value}
                //             placeholder="请输入搜索内容"
                //             onChange={e => {setValue(e.target.value)}} />
                //         <Button
                //             onClick={closeSearch}
                //             size='mini'
                //             type="primary">关闭</Button>
                // </div>


                <Input size="small" value={value} allowClear placeholder="请输入搜索内容" onChange={e => { setValue(e.target.value) }} />
            }
            {/* <FontAwesomeIcon icon={faSearch} /> */}
        </div>
    )
}

FileSearch.propTypes = {
    title: PropTypes.string,
    onFileSearch: PropTypes.func.isRequired
}
FileSearch.defaultProps = {
    title: '我的云文档'
}

export default FileSearch;